<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>画布</title>
</head>
<style>
    body{
        font-size: 70%;
        font-family: Verdana,Helvetica,Arial,sans-serif;
    }
</style>

<script type="text/javascript">
    function cnvs_getCoordinates(e) {
        x=e.clientX;
        y=e.clientY;
        document.getElementById("xycoordinates").innerHTML="Coprdinates:("+ x + "," + y +")"
    }
    function cnvs_clearCoordinates() {
        document.getElementById("xycoordinates").innerHTML="";
    }
</script>

<body style="margin: 0px">
<p>把鼠标悬停在下面的矩形上可以看到坐标</p>
<div id="coordiv" style="float:left;width: 199px;border: 1px solid red;"
     onmousemove="cnvs_getCoordinates(event)" onmouseout="cnvs_clearCoordinates()">
    <br>
    <br>
    <br>
</div>

<div id="xycoordinates">

</div>

</body>
</html>